<template>
	<view>
		<view class="locality">
			<view class="locality-txt">当地美景</view>
		</view>
		<view class="menu-block">
			<block v-for="(item,index) in list" :key="index">
				<view @click="haddle(index,item.Uname)" v-clickDown="index" :class="{active:index==num}">{{item.Uname}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {

		//自动点击事件
		directives: {
			clickDown: {
				inserted(el, binding, index) {
					if (binding.value == 0) {
						el.click()
					}
				}
			}
		},
		data() {
			return {
				num: 0,
				active: "active",
				list: [{
						"Uname": "全部"
					},
					{
						"Uname": "景点"
					},
					{
						"Uname": "美食"
					},
					{
						"Uname": "网红打卡"
					}
				]
			}
		},
		methods: {
			haddle(index, uname) {
				this.num = index
				// console.log(index,uname)
				//子组件调用父组件中的方法
				this.$parent.fatherMethods(uname)
			}
		}
	}
</script>

<style scoped>
	.locality {
		margin: 0 0 10upx 20upx;
	}

	.locality-txt {
		font-size: 50upx;

	}

	.menu-block {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;
		margin: 0 0 10upx 10upx;
	}

	.menu-block view {
		border: #b6b6b6 1px solid;
		border-radius: 10upx;
		margin-left: 10upx;
		margin-right: 15upx;
		padding: 10upx 15upx;
	}

	.active {
		background-color: #ffdb22;
	}
</style>
